/**
 * 远程控制 - 装车控制列表页
 * @author xiaoxujs
 */
import AddModule from "./components/AddModule"; // 添加装车站
import { Button, message, Progress, Spin, Switch } from "antd";
import { LGLItem, LoadingControlListBox } from "./style";
import { useCallback, useEffect, useState } from "react";
import { IYckzZyLoadControlWareHouseList } from "../../../type/remoteControl/loadingControlList";
import { getYckzZyLoadControlDeleteLoad, getYckzZyLoadControlIsNotUse, getYckzZyLoadControlWareHouseList } from "../api";
import { INoFenye } from "../../../type/commit";
import { handleDeleteAssets } from "../../../assets/fun/Antd/deleteFun";
import { useNavigate } from "react-router-dom";

const LoadingControlList = () => {
    const navigate = useNavigate();


    const [addShow, setAddShow] = useState(false); //添加装车站弹窗显示
    const [listData, setListData] = useState<IYckzZyLoadControlWareHouseList[]>([]); // 列表数据
    const [listLoading, setListLoading] = useState(false); // 列表加载show
    const listFun = useCallback(async () => {
        setListLoading(true);
        const { code, msg, data } = await getYckzZyLoadControlWareHouseList() as INoFenye<IYckzZyLoadControlWareHouseList>;
        if (code === 20000) {
            setListData(data);
        } else {
            message.error(msg);
        }
        setListLoading(false);
    }, [])
    useEffect(() => {
        listFun();
    }, [listFun])

    //  添加装车站回调函数
    const handleAddCallback = () => {
        setAddShow(false);
        listFun();
    }
    /**
     * 开启或者关闭装车站
     * @param id 装车站ID
     */
    const handleSwitch = async (id: string) => {
        const { code, msg } = await getYckzZyLoadControlIsNotUse({ id }) as { code: number, msg: string };
        if (code === 20000) {
            message.success('操作成功');
            listFun();
        } else {
            message.error(msg)
        }
    }
    const handleDelete = (id: string) => {
        handleDeleteAssets(
            async () => {
                return (await getYckzZyLoadControlDeleteLoad({ id })) as {
                    code: number;
                    msg: string;
                };
            },
            () => {
                listFun();
            }
        );
    }
    /**
     * 获取剩余百分比
     * @param all 限值
     * @param num 剩余数量
     * @returns 百分比
     */
    const handleRemainingPercentage = (all?: number, num?: number) => {
        if (all && num) {
            return Number((num / all * 100).toFixed(0))
        } else {
            return 0
        }

    }
    return <LoadingControlListBox>
        <div>
            <div className="lgl-title-button-style">
                <div className="lgl-title-button-style-nei">
                    装车控制
                </div>
            </div>
        </div>
        <div className="lgl-list-title-box">
            <div className="lgl-list-title-text">
                料仓列表
            </div>
            <Button type='primary' icon={<span className="iconfont">&#xe7df;</span>} onClick={() => setAddShow(true)}>添加装车站</Button>
        </div>
        <Spin spinning={listLoading}>
            <div className="list-box">
                {
                    listData.map(item => <LGLItem key={item.id} cardstatus={item.useStatus}>
                        <div className="look-box">
                            <div className="look-one_box">
                                <div className="look-one-left-box">
                                    <div className="look-one-image"></div>
                                    <div className="look-one-text">{item.loadStationName}({item.useStatus === 0 ? '停止使用' : '投入使用'})</div>
                                </div>
                                <Switch checked={item.useStatus ? true : false} onChange={() => handleSwitch(item.id)} />
                            </div>
                            <div>
                                <div className="look-two-item-ip-box">
                                    <span className="iconfont">&#xe623;</span>
                                    <span>
                                        PLC IP地址:
                                        {
                                            item.plcIp || '--'
                                        }
                                    </span>
                                </div>
                                <div className="look-two-item-name-box">
                                    <span className="iconfont">&#xe60a;</span>
                                    <span>
                                        物料名称：
                                        {
                                            item.plcIp || '--'
                                        }
                                    </span>
                                </div>
                            </div>
                            <div className="look-jindutiao-box">
                                <Progress percent={handleRemainingPercentage(item.limitNum, item.exactAltitude)} />
                            </div>
                        </div>
                        <div className="handle-box">
                            <div className="handle-button-box">
                                <Button icon={<span className="iconfont">&#xe64d;</span>} type="text" onClick={() => {
                                    navigate('/home/remoteControl/loadingControl/parameterSettings', {
                                        state: {
                                            id: item.id
                                        }
                                    })
                                }}>参数设置</Button>
                            </div>
                            <div className="handle-button-box">
                                <Button icon={<span className="iconfont">&#xe61c;</span>} type="text" onClick={() => handleDelete(item.id)}>删除料仓</Button>
                            </div>
                        </div>
                    </LGLItem>)

                }




            </div>
        </Spin>

        <AddModule open={addShow} handleAddCallback={handleAddCallback} />
    </LoadingControlListBox>
}

export default LoadingControlList;